<template>

   <page-view>
       <page-header :showBack="true" title="登录"></page-header>
       <div class="content-box">
           <Form >
            <cell-group inset>
                <!-- 通过 pattern 进行正则校验 -->
                <field
                v-model="value1"
                name="username"
                placeholder="请输入用户名"
                label="用户名"
                :rules="[{ required:true, message: '请输入用户名' }]"
                />
                <!-- 通过 validator 进行函数校验 -->
                <field
                v-model="value2"
                name="pwd"
                placeholder="请输入密码"
                label="密码"
                :rules="[{ required:true, message: '请输入密码' }]"
                />
            </cell-group>
            <div style="margin: 16px;">
                <Button round block type="primary" @click="checkLogin()" :loading="loading" loading-text="加载中" :disabled="loading">
                提交
                </Button>
            </div>
        </Form>
        <div class="tips">
          还没有账号？去<router-link to="/register">注册</router-link>
        </div>

       </div>
   </page-view>
</template>

<script>
import PageHeader from '../components/PageHeader.vue'
import { Form, Field, CellGroup,Button,Toast } from 'vant';
import { ref } from 'vue';
export default {
  components: {PageHeader,Form, Field, CellGroup,Button },
    setup () {
        

         const value1 = ref('');
    const value2 = ref('');
    const value3 = ref('abc');
    const pattern = /\d{6}/;

    const loading=ref(false);
    // 校验函数返回 true 表示校验通过，false 表示不通过
    const validator = (val) => /1\d{10}/.test(val);


const checkLogin=async()=>{
   Toast.loading({
      message: '加载中...',
      forbidClick: true,
      duration:0
    });
}
   

    return {
      value1,
      value2,
      value3,
      pattern,
      validator,
    checkLogin,
    loading
    };
  },
}

</script>

<style lang="scss" scoped>

</style>